//边框颜色
@ddq:{
  border: 1px solid #e8e608;
  box-sizing: border-box;
}
//路径变量
@imgUrl: "../../static/image/redBase";
//自适应基准大小
@em:calc(100vw / 375);

.redBase {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .content {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    font-size: @em;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    background-image: linear-gradient(-20deg, #D44616 0%, #D41617 100%);
    //头部导航栏
    .theNavigationBar {
      //logo区域
      .logo {
        background-image: url("@{imgUrl}/bg@2x.png");
        background-repeat: no-repeat;
        aspect-ratio:375 / 226;
        background-size: cover;
        .returnBtn {
          width: 100%;
          height: 44em;
          display: flex;
          align-items: center;
          margin-bottom: 12em;
          img {
            position: relative;
            left: 10em;
          }
        }
        .theNavigationBar {
          position: relative;
          top: -17em;
          //logo标题
          .logoTitle {
            width: 100%;
            margin-bottom: 10em;
            margin-left: 69em;
            img {
              width: 270em;
            }
          }
          //导航区域
          .navigation {
            box-sizing: border-box;
            width: 100%;
            height: 40em;
            display: flex;
            justify-content: center;
            .nav {
              width: 288em;
              display: flex;
              justify-content: center;
              background-color: rgba(0, 0, 0, 0.16);
              border-radius: 4em;
              z-index: 1;
              /*按钮静止样式*/
              .item {
                width: calc(144em / 12);
                font-size: 12em;
                border-radius: calc(4em / 12);
                color: #FFF598;
                margin: calc(4em / 12);
                text-align: center;
                line-height: calc(32em / 12);
                font-weight: 400;
              }
              /*按钮活跃样式*/
              .active {
                span {
                  width: 100%;
                  height: calc(32em / 12);
                  background-color: #BF1E16;
                  display: inline-block;
                  border-radius: calc(4em / 12);
                  font-weight: 600;
                }
              }
            }
          }
        }
      }

    }
    //地图
    #baseMap {
      height: 450em;
      position: relative;
      top:-100em;
    }
    //标题列表
    .theArticleLists {
      position: relative;
      top: -80em;
      margin-bottom: -60em;
      width: 100%;
      color: #FFFBDB;
      box-sizing: border-box;
      padding: 0 18em;
      .theArticleLists-button {
        width: calc(104em / 14);
        height: calc(32em / 14);
        background: #b22a12;
        border-radius: calc(4em / 14);
        font-family: PingFangSC-Medium;
        font-size: 14em;
        color: #FFFFFF;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: calc(20em / 14);
        img {
          width: calc(16em / 14);
        }
      }
      .theArticleLists-header {
        font-size: 16em;
        font-weight: 600;
        text-align: center;
        margin-bottom: 1em;
      }
      .theArticleLists-content {
        font-size: 14em;
        line-height: calc(22em / 14);
        .theArticleLists-main {
          display: flex;
          margin-bottom: calc(8em /14);
          .theCompanyName {
            width: calc(90em / 14);
          }
          .theTitle {
            flex: 1;
            text-decoration:underline;
          }
        }
      }
      .theArticleLists-footer{
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 10em;
        color: #FFFBDB;
        font-weight: 400;
      }
    }
  }
}
//详细内容
.theDetailedContent {
  font-size: @em;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-image: linear-gradient(-24deg, #D44616 0%, #D41617 100%);
  //头部区域
  .theDetailedContent-header {
    height: 100%;
    //头部标题
    .theDetailedConten-title {
      display: flex;
      align-items: center;
      height: 44em;
      z-index: 2;
      img {
        position: relative;
        left: 10em;
      }
      span {
        width: 100%;
        display: inline-block;
        text-align: center;
        color: #FFF598;
        font-size: 10em;
      }
    }
  }
  //交流路线文章
  .theDetailedContent-header-communicationLine {
    background-image: url("@{imgUrl}/top1@2x.png");
    background-repeat: no-repeat;
    background-size: 375em auto;
  }
  //教育基地文章
  .theDetailedContent-header-educationBase {
    background-image: url("@{imgUrl}/top2@2x.png");
    background-repeat: no-repeat;
    background-size: 375em auto;
  }
  //文章
  .theDetailedContent-theArticle {
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 60em);
    overflow-y: scroll!important;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding: 20em 24em;
    border: 0 solid yellow;
    .theDetailedContent-title {
      img {
        width: 100%;
      }
    }
    //标题公共样式
    .theDetailedContent-public-title {
      font-family: PingFangSC-Semibold;
      color: #FFF598;
      text-align: center;
      font-weight: 500;
    }
    //交流路线公司名称
    .communicationLine-cmpName {
      font-size: 18em;
      text-shadow: 0 calc(2em / 18) calc(4em / 18) rgba(0,0,0,0.50);
      margin-bottom: calc(8em / 18);
    }
    //小标题
    .theDetailedContent-headings {
      font-family: PingFangSC-Semibold;
      font-size: 12em;
      text-shadow: 0 calc(2em / 12) calc(4em / 12) rgba(0,0,0,0.50);
      padding: calc(10em / 12) 0;
      div {
        padding: calc(3em / 12) 0;
      }
      //交流路线的纪念馆
      .communicationLine-redCultureBaseName {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: @em;
        span {
          width: auto;
          border: calc(1em / 12) solid #FA9111;
          font-size: 12em;
          display: inline-block;
          padding: calc(10em / 12) calc(12em / 12);
          background-image: linear-gradient(95deg, #B11A13 0%, #BF1E16 100%);
          box-shadow: 0 2px 4px 0 rgba(0,0,0,0.36), inset 0 2px 4px 0 rgba(0,0,0,0.36);
          border-radius: calc(17em / 12);
          height: calc(14em / 12);
        }
      }
    }
    //内容
    .theDetailedContent-content {
      font-family: PingFangSC-Regular;
      font-size: 14em;
      color: #FFFBDB;
      text-align: justify;
      line-height: calc(22em / 14);
      font-weight: 400;
      text-indent:2em;
      .contact {
        text-indent:0;
        span {
          margin-right: calc(30em / 14);
        }
      }
    }
  }
  //文章尾部教育基地
  .theDetailedContent-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 24em;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: -1;
  }
  .theDetailedContent-footer-communicationLine {
    background-image: url("@{imgUrl}/bg1@2x.png");
    aspect-ratio: 375 / 310;
    z-index: 1;
  }
  //文章尾部交流路线
  .theDetailedContent-footer-educationBase {
    background-image: url("@{imgUrl}/bg2@2x.png");
    aspect-ratio: 375 / 68;
    z-index: 1;
  }
}
